<template>
  <div id="piechart" />
</template>

<script>
import ApexCharts from "apexcharts";

export default {
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    var opt = {
      chart: {
        type: "donut",
      },

      series: [44.9, 28.6],
      labels: ["普通用户", "消费用户"],
      plotOptions: {
        pie: {
          donut: {
            size: "70%",
            expandOnClick: true,
          },
        },
      },
    };

    var chart = new ApexCharts(document.querySelector("#piechart"), opt);

    chart.render();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
};
</script>
